@mixin flex-center() {
	@include flex;
	align-items: center;
}
@mixin flex-baseline()
{
	@include flex;
	align-items: baseline;
}
@mixin flex-end()
{
	@include flex;
	align-items: flex-end;
}
@mixin setDirectionName($var)
{
	@if $var == 'space-bt' {
		justify-content: space-between;
	}
	@if $var == 'space-ar' {
		justify-content: space-around;
	}
	@if $var == 'end' {
		justify-content: flex-end;
	}
	@if $var == 'center' {
		justify-content: center;
	} 
}

.flex {
	@include flex;
}
.flex-1 {
	flex: 1;
}
.flex-col {
	@include flex(column);
}
.flex-end
{
	@include flex-end;
}
.flex-center {
	@include flex-center;
}
.position-sticky-top {
	box-sizing: border-box;
	position: sticky;
	z-index: 1;
	left: 0;
	top: 0;
}
.position-sticky-bottom {
	box-sizing: border-box;
	position: sticky;
	z-index: 1;
	left: 0;
	bottom: 0;
}
#page {
	min-height: 100vh;
}

.textArea-lineHeight
{
	line-height: 1.5;
	letter-spacing: 4rpx;
}

@each $var in space-bt, space-ar, end, center {
	.flex-end-#{$var}
	{
		@include flex-end;
		@include setDirectionName($var)
	}
	.flex-start-#{$var}
	 {
		@include flex;
		@include setDirectionName($var)
	 }
	.flex-col-center-#{$var} {
		@include flex(column);
		align-items: center;
		@include setDirectionName($var)
	}
	.flex-center-#{$var} {
		@include flex-center;
		@include setDirectionName($var)
	}
	.flex-baseline-#{$var} {
		@include flex-baseline;
		@include setDirectionName($var)
	}
}
@mixin setTextEllipsis($line: 1) {
	white-space: nowrap;
	width: 100%;
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
}
@for $i from 1 through 4 {
	.ellipsis-text-#{$i} {
		@include setTextEllipsis($i);
	}
}
// :not(not)
// {
// 	box-sizing: border-box;
// }

.third-party-tag-item {
    padding: 0 10rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 22rpx;
    color: #666666;
    border-radius: 4rpx;
    background-color: #e5f8f8;
}